<template>
  <div class="yoyo-container mx-auto min-h-screen">
    <navBar></navBar>
    <div class="bg-white md:mx-4 p-2">
      <div class="text-xl font-bold text-center text-gray-900 mt-4">{{ isZh ? articleInfo.title : articleInfo.titleEn }}</div>
      <div v-html="isZh ? articleInfo.content : articleInfo.contentEn" class="text-[14px] text-gray-800 p-4"></div>
    </div>
  </div>
</template>
<script>
import { getArticle } from "@/apis/common"
import { mapGetters } from "vuex"
export default {
  name: "Article",
  data() {
    return {
      articleInfo: {},
    }
  },
  computed: {
    ...mapGetters({
      isZh: "lang/isZh",
    }),
  },
  methods: {
    async getArticleInfo() {
      try {
        const res = await getArticle({ id: this.$route.query.id })
        this.articleInfo = res.data
      } catch (error) {
        console.log(error)
      }
    },
  },
  created() {
    this.getArticleInfo()
  },
}
</script>
<style scoped></style>
